<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/macarons.js"></script>
    <script src="js/china.js"></script>
    <script src="js/countUp.js"></script>
    <script src="js/data01.js"></script>

</head>
<body>
<div class="first-screen root-wrap">
    <header>
        <img src="img/销售数据展示平台.png">
        <div class="gifImg">
            <span class="month-tip">{{$config['datetime']}}</span>
        </div>
        <div class="title_img"><img src="img/矩形 22.png" alt=""></div>
    </header>
    <div class="main clearfix">
        <div class="aside-left fl">
            <div class="top left-top">
                <h3>销冠榜</h3>
                <div class="tit clearfix">
                    <span class="ranking fl">排名</span>
                    <span class="company fl">头像</span>
                    <span class="name fl">名称</span>
                    <span class="hot fl">金额</span>
                </div>
                <div class="con-wrap">
                    <div class="over-wrap">
                        <ul class="con">
                            @foreach($project_m_count as $key=>$item)
                                <li class="active">
                                    <div class="book-rank clearfix">
                                        <span class="ranking fl">{{ $loop->iteration  }}</span>
                                        <span class="name fl" style="height: 100%">
                                            <div class="img-box fl ">
                                                <img src="{{$item['avatar']}}"
                                                     style="width: 30%;height: 30%; border-radius: 50%; object-fit: cover;"
                                                     alt="">
                                            </div>
                                        </span>
                                        <span class="company fl">
                                            {{$item['alias_name']}}
                                        </span>
                                        <span class="hot fl">{{$item['money']}}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bottom left-bottom">
                <div class="bottom-in">
                    <h3>最新项目TOP30</h3>
                    <div class="tit clearfix">
                        <span class="ranking fl"></span>
                        <span class="short fl">项目名称</span>
                        <span class="hot fl">时间</span>
                    </div>
                    <ul class="con" id="scrollList">
                        @foreach($project_progress as $key=>$project_progress_item)
                            <li>
                                <div class="book-rank clearfix">
                                    <span class="ranking fl"></span>
                                    <span class="short fl">{{$project_progress_item['name']}}</span>
                                    <span class="hot fl">{{$project_progress_item['schedule']}}</span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle-map fl">
            <div class="map-wrap">
                <h3 class="clearfix">
                    <dl class="fl">
                        <dt>项目总数</dt>
                        <dd id="book-data" class="unit-number">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>总预算</dt>
                        <dd id="varity-data" class="unit-type">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>已结算金额</dt>
                        <dd id="sales-data" class="unit-type">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>已验收项目</dt>
                        <dd id="pp-data" class="unit-number">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>项目成本</dt>
                        <dd id="stock-data" class="unit-type">0</dd>
                    </dl>

                    <dl class="fl">
                        <dt>本月项目总数</dt>
                        <dd id="bbook-data" class="unit-number">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>本月总预算</dt>
                        <dd id="bvarity-data" class="unit-type">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>本月已结算金额</dt>
                        <dd id="bsales-data" class="unit-type">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>本月已验收项目</dt>
                        <dd id="bpp-data" class="unit-number">0</dd>
                    </dl>
                    <dl class="fl">
                        <dt>本月项目成本</dt>
                        <dd id="bstock-data" class="unit-type">0</dd>
                    </dl>
                </h3>

                {{--                <span class="title-map">交换书目数据地图</span>--}}

                <div id="map" style="width: 100%;height: 80%;margin-top: 150px;"></div>
            </div>
        </div>
        <div class="aside-right fl">
            <div class="pie clearfix">
                <div class="pie1 fl">
                    <h3>各地销售总额</h3>
                    <div id="pie1" style="width: 100%;height: 80%;"></div>
                </div>
                <div class="pie2 fl">
                    <h3>各地销售单数</h3>
                    <div id="pie2" style="width: 100%;height: 80%;"></div>
                </div>
            </div>
            <div class="area-rank">
                <h3>各地区销售总额排行</h3>
                <div class="con">
                    <ul>
                        @foreach($rankings['data'] as $key=>$area_rank_item)
                            <li>
                                <span class="num">{{ $loop->iteration}}</span>
                                <span class="city-name">{{$area_rank_item['name']}}</span>
                                <span class="bar">
                                  <b class="bar-in"
                                     style="width: {{($area_rank_item['value']/$rankings['total_amount'])*100}}%"></b>
                                </span>
                                <span class="rank-value">{{$area_rank_item['value']*100}}</span>
                            </li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <div class="trend">
                <h3>项目月度走势图</h3>
                <div id="trendBar1" style="width: 100%;height: 80%;"></div>
            </div>
        </div>
    </div>
    <div class="main-bottom">
        <span class="line1"></span>
        <span class="line2"></span>
        <span class="line3"></span>
    </div>
</div>
{{--<script src="js/index.js"></script>--}}
{{--<script src="js/mapIndex.js"></script>--}}
</body>
<script src="https://cdn.socket.io/socket.io-2.2.0.slim.js"></script>
<script src="js/fn.js"></script>
<script src="js/websocketdata.js"></script>
</html>
